<%-- 
    Document   : about-toggle
    Created on : 24/07/2013, 15:23:44
    Author     : Jean Carlo
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">  
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <title>SIMPLE</title>


        <!-- CSS -->
        <link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
        <!--[if IE 6]>
                <link rel="stylesheet" type="text/css" media="screen" href="css/ie-hacks.css" />
                <script type="text/javascript" src="js/DD_belatedPNG.js"></script>
                <script>
                /* EXAMPLE */
                DD_belatedPNG.fix('*');
        </script>
        <![endif]-->
        <!--[if IE 7]>
                <link rel="stylesheet" href="css/ie7-hacks.css" type="text/css" media="screen" />
        <![endif]-->
        <!--[if IE 8]>
                <link rel="stylesheet" href="css/ie8-hacks.css" type="text/css" media="screen" />
        <![endif]-->
        <!-- ENDS CSS -->

        <!-- prettyPhoto -->
        <link rel="stylesheet" href="js/prettyPhoto/css/prettyPhoto.css" type="text/css" media="screen" />
        <!-- ENDS prettyPhoto -->

        <!-- JS -->
        <script type="text/javascript" src="js/jquery_1.4.2.js"></script>
        <script type="text/javascript" src="js/jqueryui.js"></script>
        <script type="text/javascript" src="js/easing.js"></script>
        <script type="text/javascript" src="js/jquery.cycle.all.js"></script>
        <script type="text/javascript" src="js/tooltip/jquery.tools.min.js"></script>
        <script type="text/javascript" src="js/filterable.pack.js"></script>
        <script type="text/javascript" src="js/prettyPhoto/js/jquery.prettyPhoto.js"></script>
        <script type="text/javascript" src="js/chirp.js"></script>
        <script type="text/javascript" src="js/jquery.tabs/jquery.tabs.pack.js"></script>
        <script type="text/javascript" src="js/custom.js"></script>
        <!-- ENDS JS -->

        <!-- Cufon -->
        <script src="js/cufon-yui.js" type="text/javascript"></script>
        <script src="js/fonts/bebas-neue_400.font.js" type="text/javascript"></script>
        <!-- /Cufon -->

        <!-- superfish -->
        <link rel="stylesheet" type="text/css" media="screen" href="css/superfish-custom.css" /> 
        <script type="text/javascript" src="js/superfish-1.4.8/js/hoverIntent.js"></script> 
        <script type="text/javascript" src="js/superfish-1.4.8/js/superfish.js"></script> 
        <!-- ENDS superfish -->

        <!-- tabs -->
        <link rel="stylesheet" href="css/jquery.tabs.css" type="text/css" media="print, projection, screen" />
        <!-- Additional IE/Win specific style sheet (Conditional Comments) -->
        <!--[if lte IE 7]>
        <link rel="stylesheet" href="css/jquery.tabs-ie.css" type="text/css" media="projection, screen">
        <![endif]-->
        <!-- ENDS tabs -->

    </head>


    <body>

        <!-- HEADER -->
        <div id="header">
            <div class="degree">
                <div class="wrapper">
                    <a href="index.jsp"><img src="img/logo.png" alt="Logo" id="logo" /></a>

                    <!-- search -->
                    <div class="top-search">
                        <form  method="get" id="searchform" action="">
                            <div>
                                <input type="text" value="Search..." name="s" id="s" onfocus="defaultInput(this)" onblur="clearInput(this)" />
                                <input type="submit" id="searchsubmit" value=" " />
                            </div>
                        </form>
                    </div>
                    <!-- ENDS search -->

                    <!-- navigation -->
                    <div id="nav-holder">
                        <ul id="nav" class="sf-menu">
                            <li><a href="index.jsp">HOME</a>
                                <ul>
                                    <li><a href="index-3d.jsp">3D SLIDESHOW</a></li>
                                </ul>
                            </li>
                            <li class="current_page_item"><a href="about.jsp">FEATURES</a>
                                <ul>
                                    <li><a href="about.jsp">LAYOUT</a></li>
                                    <li><a href="about-styled.jsp">STYLED</a></li>
                                    <li><a href="about-more.jsp">MORE</a></li>
                                    <li><a href="about-toggle.jsp">TOGGLE BOX</a></li>
                                    <li><a href="about-accordion.jsp">ACCORDION</a></li>
                                    <li><a href="appearance.jsp">APPEARANCE</a></li>
                                </ul>
                            </li>
                            <li><a href="portfolio.jsp">PORTFOLIO</a></li>
                            <li><a href="gallery.jsp">GALLERY</a>
                                <ul>
                                    <li><a href="gallery.jsp">FOUR COLS</a></li>
                                    <li><a href="gallery-3.jsp">THREE COLS</a></li>
                                    <li><a href="gallery-2.jsp">TWO COLS</a></li>
                                </ul>
                            </li>
                            <li ><a href="blog.jsp">BLOG</a></li>
                            <li><a href="contact.jsp">CONTACT</a></li>
                            <li><a href="staff.jsp">STAFF</a></li>
                            <li><a href="http://luiszuno.com/blog/downloads/simple-template ">DOWNLOAD</a></li>
                        </ul>
                    </div>
                    <!-- ENDS navigation -->

                </div>
                <!-- ENDS HEADER-wrapper -->
            </div>
        </div>
        <!-- ENDS HEADER -->

        <!-- MAIN -->
        <div id="main">
            <!-- wrapper -->
            <div class="wrapper">
                <!-- content -->
                <div class="content">
                    <!-- title -->
                    <div class="title-holder">
                        <span class="title">TOGGLE BOXES</span>
                        <span class="subtitle">Set any number of toggle boxes elements</span>
                    </div>
                    <!-- ENDS title -->

                    <!-- page-content -->
                    <div class="page-content">

                        <!-- accordions -->
                        <h5 class="toggle-trigger custom"><a href="#">LOREM IPSUM DOLOR</a></h5>
                        <div class="toggle-container">
                            <div class="block">
                                <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. </p>
                            </div>
                        </div>
                        <h5 class="toggle-trigger custom"><a href="#">LOREM IPSUM DOLOR</a></h5>
                        <div class="toggle-container">
                            <div class="block">
                                <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. </p>
                            </div>
                        </div>
                        <h5 class="toggle-trigger custom"><a href="#">LOREM IPSUM DOLOR</a></h5>
                        <div class="toggle-container">
                            <div class="block">
                                <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. </p>
                            </div>
                        </div>
                        <h5 class="toggle-trigger custom"><a href="#">LOREM IPSUM DOLOR</a></h5>
                        <div class="toggle-container">
                            <div class="block">
                                <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. </p>
                            </div>
                        </div>
                        <h5 class="toggle-trigger custom"><a href="#">LOREM IPSUM DOLOR</a></h5>
                        <div class="toggle-container">
                            <div class="block">
                                <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. </p>
                            </div>
                        </div>
                        <h5 class="toggle-trigger custom"><a href="#">LOREM IPSUM DOLOR</a></h5>
                        <div class="toggle-container">
                            <div class="block">
                                <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. </p>
                            </div>
                        </div>
                        <p class="clear"></p>
                        <!-- ENDS accordions -->	


                    </div>
                    <!-- ENDS page-content -->

                </div>
                <!-- ENDS content -->

                <!-- twitter -->
                <div class="twitter-reader">
                    <script>Chirp({user:"ansimuz",max:1})</script></div>
            </div>
            <!-- ENDS twitter -->

        </div>
        <!-- ENDS main-wrapper -->


        </div>		
        <!-- ENDS MAIN -->	

        <!-- FOOTER -->
        <div id="footer">
            <div class="degree">
                <!-- wrapper -->
                <div class="wrapper">
                    <!-- social bar -->
                    <div id="social-bar">

                        <ul class="follow-us">
                            <li><span>FOLLOW US</span></li>
                            <li ><a href="#" class="icon-32 twitter-32 social-tooltip" title="Follow our tweets">link</a></li>
                            <li ><a href="#" class="icon-32 vimeo-32 social-tooltip" title="Lorem ipsum dolor">link</a></li>
                            <li ><a href="#" class="icon-32 dribbble-32 social-tooltip" title="Lorem ipsum dolor">link</a></li>
                            <li ><a href="#" class="icon-32 flickr-32 social-tooltip" title="Lorem ipsum dolor">link</a></li>
                            <li ><a href="#" class="icon-32 facebook-32 social-tooltip" title="Lorem ipsum dolor">link</a></li>

                        </ul>
                    </div>
                    <!-- ENDS social bar -->
                    <!-- footer-cols -->
                    <ul class="footer-cols">
                        <li class="col">
                            <h6>CATEGORIES</h6>
                            <ul>
                                <li><a href="#">WEBDESIGN</a></li>
                                <li><a href="#/">WORDPRESS</a></li>
                                <li><a href="#">PHOTO</a></li>
                                <li><a href="#">CODING</a></li>
                            </ul>
                        </li>
                        <li class="col">
                            <h6>PAGES</h6>
                            <ul>
                                <li><a href="#">HOW TO CUSTOMIZE THIS TEMPLATE</a></li>
                                <li><a href="#">5 ESSENTIALS RULES</a></li>
                                <li><a href="#">LOREM IPSUM DOLOR</a></li>
                            </ul>
                        </li>
                        <li class="col">
                            <h6>FREE TEMPLATES &amp; THEMES</h6>
                            <p>Get tons of free high quality templates at <a href="http://templatecreme.com">Template Creme</a>.</p>
                        </li>	
                        <li class="col">
                            <h6>PAGES</h6>
                            <ul>
                                <li><a href="#">HOW TO CUSTOMIZE THIS TEMPLATE</a></li>
                                <li><a href="#">5 ESSENTIALS RULES</a></li>
                                <li><a href="#">LOREM IPSUM DOLOR</a></li>
                            </ul>
                        </li>		
                    </ul>
                    <!-- ENDS footer-cols -->
                </div>
                <!-- ENDS footer-wrapper -->
            </div>
        </div>
        <!-- ENDS FOOTER -->


        <!-- BOTTOM -->
        <div id="bottom">
            <!-- wrapper -->
            <div class="wrapper">
                SIMPLE THEME by <a href="http://www.luiszuno.com" >luiszuno.com</a>
            </div>
            <!-- ENDS bottom-wrapper -->
        </div>
        <!-- ENDS BOTTOM -->

        <!-- start cufon -->
        <script type="text/javascript"> Cufon.now(); </script>
        <!-- ENDS start cufon -->

    </body>
</html>